<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/11/15 0015
  Time: 下午 13:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
    <style type="text/css">
        .locaDiv{
            width:80%;
            margin:auto;
        }
        .locaDivChild {
            width: 60px;
            height: 60px;
            margin: 10px 5px 0 5px;
            display: inline-block;
            color: #FFF;
            font-size:10px;
            text-align: center;
        }
        .locaDivChild p{
            width: 60px;
            margin-top:20px;
            word-wrap:break-word;
            word-break:break-all;
            overflow: hidden;
        }
        .my-skin{
            background-color: #FFF;
        }
        .box{
            margin:0 20px 10px 20px;
            font-size:14px;
            line-height:30px;
            vertical-align: middle;
        }
        .header{
            width:80%;
            margin:auto;
            margin-top: 20px;
        }
        .green{
            background-color:#32CD32;
        }
        .yellow{
            background-color:#FFA500;
        }
    </style>
</head >
<body>

    <div>
        <div style="position: fixed;right:0;top:200px">
            <div class="green locaDivChild">
                <p>空库位</p>
            </div><br>
            <div class="yellow locaDivChild">
                <p>有物料</p>
            </div>
        </div>
    </div>

    <div class="locaDiv">
        <div class="layui-tab" lay-filter="test1">
            <ul class="layui-tab-title">
                <c:forEach items="${allRegion}" var="region" varStatus="vs">
                    <c:choose>
                        <c:when test="${vs.index == 0}">
                            <li class="layui-this" lay-id="${region.id}">${region.region_name }</li>
                        </c:when>

                        <c:otherwise>
                            <li lay-id="${region.id}">${region.region_name }</li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </ul>
            <div id="tabContent" class="layui-tab-content"></div>
        </div>
    </div>

    <script>
        $(function () {
            var id = $('ul li:eq(0)').attr('lay-id')
            getRegionDetail(id);
        })
        layui.use('element', function(){
            var element = layui.element;
            var layid = location.hash.replace(/^#test1=/, '');
            element.tabChange('test1', layid);
            element.on('tab(test1)', function(){
                getRegionDetail(this.getAttribute('lay-id'))
            });
        });
        function getRegionDetail(regionId) {
            $('#tabContent').empty()
            $.ajax({
                url:'${pageContext.request.contextPath }/bindAndUnbind/getRegionDetailByRegionId.do',
                type:'POST',
                data:{regionId:regionId},
                success:function (result) {
                    var stalyColor = 'green'
                    var locaDivChild = ''
                    $.each(result,function (index,row) {
                        if (row.id > 0) {
                            stalyColor = 'yellow'
                        }else {
                            stalyColor = 'green'
                        }
                        locaDivChild += '<div onclick="onclickDetail(\''+row.location_num+'\')" class="locaDivChild '+stalyColor+'"><p>'+row.location_name+'</p></div>'
                    })
                    $('#tabContent').append('<div class="layui-tab-item layui-show">'+locaDivChild+'</div>')
                }
            })
        }

        //点击详细信息
        function onclickDetail(location_num) {
            layui.use(['table','layer','upload','form','laydate'], function(){
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                var laydate = layui.laydate;
                layer.open({
                    type: 2,
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 0, 				//不显示关闭按钮
                    anim: 2,
                    area: ['800px','700px'],		//宽高
                    shade: [0.8, '#393D49'],
                    shadeClose: true, 		//开启遮罩关闭
                    //content: $("#check"+location_num+"")
                    content: '${pageContext.request.contextPath }/bindAndUnbind/regionDetailPage.do?location_num='+location_num,
                    success: function(layero, index) {
                        layer.iframeAuto(index);
                    }
                });
            })
        }
</script>
</body>
</html>
